<template>
	<view class="">
		<view class="body">
			<view class="item">
				<view class="left">
					头像
				</view>
				<view class="right" >
					<image :src="userInfo.avatar" 
							class="face" 
							@tap="operator"
							v-if="userInfo.avatar" 
							:data-faceImg="userInfo.avatar"></image>
					<image src="/static/icon/default-face.png" 
							class="face" 
							v-else 
							@tap="operator"
							data-faceImg='/static/icon/default-face.png'></image>
					<view class="arrow">
						<image src="/static/icon/left-gray-arrow.png"></image>
					</view>
				</view>
				
			</view>
			<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
			<view class="item" @tap="clickText('nickName')">
				<view class="left">
					昵称
				</view>
				<view class="right">
					<text>{{userInfo.nickname || '未设置'}}</text>
					<view class="arrow">
						<image src="/static/icon/left-gray-arrow.png"></image>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					积分
				</view>
				<view class="right">
					<text>{{userInfo.integral || '0'}} 分</text>
					<view class="arrow">
					
					</view>
				</view>
			</view>
			<view class="item" @tap="togglePopup('bottom','popup')">
				<view class="left">
					生日
				</view>
				<view class="right">
					<text>{{birthday || '未设置'}}</text>
					<view class="arrow">
						<image src="/static/icon/left-gray-arrow.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="item" @tap="togglePopupSex('bottom','sex')">
				<view class="left">
					性别
				</view>
				<view class="right">
					<text>{{userInfo.sex}}</text>
					<view class="arrow">
						<image src="/static/icon/left-gray-arrow.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="item" @tap="clickText('email')">
				<view class="left">
					邮箱
				</view>
				<view class="right">
					<text>{{userInfo.email || '未设置'}}</text>
					<view class="arrow">
						<image src="/static/icon/left-gray-arrow.png"></image>
					</view>
				</view>
			</view>
			<view class="item" @tap="clickText('mobile')">
				<view class="left">
					手机号
				</view>
				<view class="right">
					<text>{{userInfo.mobile || '未设置'}}</text>
					<view class="arrow">
						<image src="/static/icon/left-gray-arrow.png"></image>
					</view>
				</view>
			</view>
			<view class="item" @tap="clickText('address')">
				<view class="left">
					地址
				</view>
				<view class="right">
					<text>{{userInfo.address || '未设置'}}</text>
					<view class="arrow">
						<image src="/static/icon/left-gray-arrow.png"></image>
					</view>
				</view>
			</view>
			
		</view>

		<uni-popup ref="popup" :type="type">
			<date-picker @submit="submitDate"></date-picker>
		</uni-popup>
		<uni-popup ref="sex" :type="sexType">
			<sex-picker @submitSex="submitSex"></sex-picker>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopup from './components/uni-popup.vue'
	import datePicker from './components/datePicker.vue'
	import sexPicker from './components/sexPicker.vue'
	import ImageCropper from "./components/image-cropper.vue";
	export default {
		data(){
			return{
				userInfo:[],
				type: '',
				sexType: '',
				birthday:'',
				tempFilePath: '', //图片临时地址
				cropFilePath:'' ,//裁剪后的图片地址
			}
		},
		
		onShow() {
			this.userInfo=uni.getStorageSync("gUserInfo");
			console.log(this.userInfo);
			// 如果 this.userInfo为空，说明缓存里没有登陆信息，用户没有登陆，返回登陆页面
			if(this.userInfo.length<=0){
				uni.navigateTo({
					url:'./login'
				})
				return;
			}
			if(this.userInfo.birthday>0){
				this.birthday=this.util.format_date(this.userInfo.birthday).substr(0,10);
			}
			this.userInfo.sex=this.util.get_sex(this.userInfo.gender);
		},
		methods:{
			operator(e){
				let self=this;
				let faceImg=e.currentTarget.dataset.faceimg;
				uni.showActionSheet({
					itemList: ["查看我的头像","从相册选择上传"],
					success: res => {
						let index=res.tapIndex;
						if(index==0){
							// 预览头像
							let faceArr=[];
							faceArr.push(faceImg);
							uni.previewImage({
								urls:faceArr,
								current:faceArr[0]
							})
						}else if(index==1){
							// 从相册上传头像
							uni.chooseImage({
								count:1,
								sizeType:["compressed"],
								sourceType:["album"],
								success:function(result){
									// 获得临时路径
									self.tempFilePath=result.tempFilePaths[0];
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			confirm(e){
				uni.showLoading({
				    title: '上传中..'
				});
				let self=this;
				// 前端裁剪后的图片
				this.cropFilePath = e.detail.tempFilePath;
				this.userInfo.avatar=this.cropFilePath;
				var uploadUrl = this.requestUrl.editUserFace + this.userInfo.token;
				
				uni.uploadFile({
					url: uploadUrl,
					filePath: this.cropFilePath,
					name: 'file',
					// 在后端处理时，又进行了一次裁剪，为使后端原样裁剪，裁剪的宽度，高度，都用前端裁剪后返回的图片高度，宽度，裁剪起点都用0，上传的图片地址用裁剪后返回的图片临时地址 this.cropFilePath。
					formData: {
						'img_width':e.detail.cropWidth, 
						'img_height':e.detail.cropHeight,
						'img_x':0,
						'img_y':0
					},
					success: function(res) {
						let response=JSON.parse(res.data);
						self.userInfo.avatar=response.data;
						uni.setStorageSync("gUserInfo",self.userInfo);
						uni.showToast({
							title: response.msg,
							duration: 1500
						});
					},
					
					complete: function() {
						uni.hideLoading();
					}
				})
			},
		
			
			// 修改 昵称，地址，邮箱，手机
			clickText(e){
				var url='./inputText?flag='+ e;
				uni.navigateTo({
					url:url
				})
			},
			
			// 清理缓存
			cleanStorage() {
				uni.clearStorageSync();
				uni.showToast({
					title:"清理缓存成功",
					duration:1500,
					success:function(){
						setTimeout(function(){
							uni.redirectTo({
								url: "./me"
							})
						},1500)
					}
				})
			},
			// 退出
			logout(){
				uni.removeStorageSync("gUserInfo");
				uni.showToast({
					title:"退出成功",
					duration:1500,
					success:function(){
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
							});
						}, 1500)
					}
				})
			},
			
			
			togglePopup(type,open) {
				this.type = type
				this.$refs[open].open()
			},
			togglePopupSex(type,open) {
				this.sexType = type
				this.$refs[open].open()
			},
			submitDate(e){
				var self=this;
				var editUserInfoUrl = this.requestUrl.editUserInfo;

				// 把日期格式转成时间戳
				this.userInfo.birthday=self.util.strtotime(e);
				var editParams={
					data:this.userInfo
				}
				
				this.util.request(editUserInfoUrl,'post',function(res){
					if (res.data.code == 0) {
						uni.setStorageSync("gUserInfo", self.userInfo);
						self.birthday = e;
					}
					uni.showToast({
						title: res.data.msg,
						duration: 1500
					});
				},editParams)
			},
			submitSex(e){
				var sex=0;
				var self=this;
				var editUserInfoUrl = this.requestUrl.editUserInfo;
				switch(e){
					case '女':
						sex=1;
						break;
					case '男':
						sex=2;
						break;
					default:
						break;
				}
				this.userInfo['gender']=sex;
				var editParam={
					data:this.userInfo
				}

				this.util.request(editUserInfoUrl,'post',function(res){
					if (res.data.code == 0) {
						// 更新缓存
						uni.setStorageSync("gUserInfo", self.userInfo);
						self.userInfo.sex = e;
					}
					uni.showToast({
						title: res.data.msg,
						duration: 1500
					});
				},editParam)
				
			},
		},
		components:{
			uniPopup,
			datePicker,
			sexPicker,
			ImageCropper
		}
	}
</script>

<style scoped lang="scss">
	.body{background:$uni-bg-color;padding:30rpx;margin:15rpx 0}
	.item{width:100%;border-bottom: solid 1px $uni-border-color;display: flex;flex-direction: row;justify-content: space-between;padding:16rpx 10rpx;align-items: center;}
	.item .left{font-size: $uni-font-size-lg;}
	.item .right{font-size: $uni-font-size-base;color: $uni-text-color-grey;}
	.item .right{overflow: hidden;display: flex;flex-direction: row;justify-content: space-between;align-items: center;min-height: 60rpx;}
	.face{width: 80rpx;height: 80rpx;border-radius: 50%;}
	.arrow{margin:8rpx 0 0 15rpx;}
	.arrow image{width:30rpx;height: 30rpx;}
	/* 底部操作start */
	.footer-wapper{position:fixed;bottom:0;display: flex;flex-direction: column;width: 100%;}
	.footer-words{text-align: center;background-color: white;padding:20rpx;font-size: 32rpx;}
</style>
